<template>
  <div class="main">
    <div class="item-content">
      <div :class="['main-item-img', eqm.info.icon]" />
      <div class="item-content-name"> {{ eqm.name }} </div>
    </div>
    <div class="main-item">
      <div v-if="!isResult" class="item-content main-item-tag">
        <div class="status-frame">
          <div class="status">状态：</div>
          <div :class="[machineStatus, 'status-bar']" :style="{width:styleWidth + 'rem'}" />
        </div>
      </div>
      <div v-if="!isResult" class="item-content main-item-tag">
        <div class="status-name">
          <div class="status">负荷率：</div>
          <div class="result-value">{{ resultValue }}% </div>
        </div>
        <div class="status-value">
          <div class="status">冷冻泵频率：</div>
          <div class="result-current-value">{{ eqm.info && eqm.info.f ? parseFloat(eqm.info.f).toFixed(2) + 'Hz' :'-' }} </div>
        </div>
      </div>
      <div v-if="isResult" class="item-content main-item-tag">
        <div class="status-frame">
          <div class="status">状态：</div>
          <div :class="[machineStatus1, 'status-bar']" :style="{width:styleWidth1 + 'rem'}" />
        </div>
      </div>
      <div v-if="isResult" class="item-content main-item-tag">
        <div class="status-name">
          <div class="status">负荷率：</div>
          <div class="result-value">{{ resultValue1 }}% </div>
        </div>
        <div class="status-value">
          <div class="status">冷冻泵频率：</div>
          <div class="result-current-value">{{ (eqm && eqm.tag) ? parseFloat(eqm.tag.find(i => i.id === 'f').value).toFixed(2) + 'Hz' : '-' }} </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EqmCard',
  props: {
    eqm: {
      type: Object,
      required: false,
      default: () => {}
    },
    index: {
      type: Number,
      required: false,
      default: 1
    },
    showstatus: {
      type: Boolean,
      required: false,
      default: true
    },
    isResult: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  computed: {
    resultValue() {
      return (this.eqm && this.eqm.info && this.eqm.info.lr) ? parseFloat(this.eqm.info.lr).toFixed(2) : 0
    },
    resultValue1() {
      return (this.eqm && this.eqm.tag) ? parseFloat(this.eqm.tag.find(i => i.id === 'lr').value).toFixed(2) : 0
    },
    styleWidth() {
      return parseInt(this.resultValue) / 100 * 7
    },
    styleWidth1() {
      return parseInt(this.resultValue1) / 100 * 7
    },
    machineStatus() {
      if (!this.eqm) {
        return 'undefine'
      }
      if ((this.eqm.info && this.eqm.info.s === '1') || (this.eqm.info && this.eqm.info.s === 1)) {
        return 'normal'
      }
      if (this.eqm.info && this.eqm.info.s !== '1' && this.eqm.info.s !== 1) {
        return 'abnormal'
      }
      return 'undefine'
    },
    machineStatus1() {
      if (!this.eqm) {
        return 'undefine'
      }
      if ((this.eqm.tag && this.eqm.tag.find(i => i.id === 's').value === '1') || (this.eqm.tag && this.eqm.tag.find(i => i.id === 's').value === 1)) {
        return 'normal'
      }
      if (this.eqm.tag && this.eqm.tag.find(i => i.id === 's').value !== '1' && this.eqm.tag.find(i => i.id === 's').value !== 1) {
        return 'abnormal'
      }
      return 'undefine'
    },
    tags() {
      if (!this.eqm || !this.eqm.tag) {
        return []
      }
      const low = 'lower_limit'
      const upper = 'upper_limit'
      let tag = this.eqm.tag.filter(a => {
        return a.id === low || a.id === upper
      })
      tag = tag.map(a => {
        if (a.id === low) {
          return {
            'id': a.id,
            'name': '压力下限',
            'value': a.value,
            'unit': a.unit
          }
        }
        if (a.id === upper) {
          return {
            'id': a.id,
            'name': '压力上限',
            'value': a.value,
            'unit': a.unit
          }
        }
      })
      console.log('tag', tag)
      return tag
    }

  }

}
</script>
<style lang="scss" scoped>
.main{
  flex-grow: 1;
  display: flex;
  flex-flow: row nowrap;
  color: white;
}
.item-content-name{
  line-height: 4rem;
  overflow:hidden; /*超出的部分隐藏起来。*/
  white-space:nowrap;/*不换行*/
  text-overflow:ellipsis;/*超出文本以省略号显示 */
}
.item-content{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #394c62;
  border-bottom: 1px solid #394c62;
  flex-basis: 30%;
  text-align: center;
  padding: 0.6rem 0rem;
  line-height: 3rem;
}
.item-no{
  width: 20%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: center;
}
.main-item-img{
  width: 70%;
  margin: 0.5rem 10%;
  height: 6rem;
  flex-grow: 1;
  line-height: 4rem;
  background: url('~@assets/csot/冰机.svg') no-repeat center top;
}
.main-item{
  display: flex;
  flex-flow: row nowrap;
  flex-basis: 70%;

}
.result-content{
  width: 100%;
}
.result-value{
  color: #02eefa;
  text-decoration: underline;
  font-weight: bold;
  flex-basis: 30%;
  text-align: center;
  line-height: 4rem;
}
.result-current-value{
  color: #02eefa;
  font-weight: bold;
  flex-basis: 30%;
  text-align: center;
  line-height: 4rem;

}
.main-item-tag{
  display: flex;
  flex: 1;
  justify-content: space-around;
}
.status-bar{
  width: 7rem;
  height:1.3rem;
  margin: 1.2rem 0;
}
.status-name{
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #394c62;
}
.status-frame{
  height: 100%;
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: flex-start;
  padding-left: 10%;
  align-items: center;
}
.status{
  text-align: center;
}
.status-value{
  width: 100%;
  height: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;

}
.abnormal{
  background: red;
}
.normal{
  background: red;
}
.undefine{
  background: gray;
}
.host {
  background: url('~@assets/csot/冰机.svg') no-repeat center top;
}
.Screw_Air_Compressor {
  background: url('~@assets/csot/螺杆空压机.svg') no-repeat center top
}
.Air_Compressor {
  background: url('~@assets/csot/离心空压机.svg') no-repeat center top;
}
</style>
